<template>

  <!-- 头部 -->
  <headers>

  </headers>

  <!-- <div class="box">
    <van-swipe class="my-swipe"
               :autoplay="3000"
               indicator-color="white">
      <van-swipe-item>
        <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
             alt=""
             srcset="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
             alt=""
             srcset="">
      </van-swipe-item>

    </van-swipe>

    <van-grid :column-num="5">
      <van-grid-item class="van-grid-item"
                     :border="false"
                     v-for="item in iconsList"
                     :key="item">
        <van-image width="40"
                   height="40"
                   :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" />

        <span class="text"> {{item.desc}}</span>

      </van-grid-item>
    </van-grid> -->

  <h1> 附近的店铺</h1>

  <!-- expressLimit: 0
  expressPrice: 5
  imgUrl: "http://www.dell-lee.com/imgs/vue3/near.png"
  name: "沃尔玛"
  sales: 10000
  slogan: "VIP尊享满89元减4元运费券" -->
  <!-- <van-card v-for="num in 3"
            :key=num
            title="沃尔玛"
            centered
            thumb="http://www.dell-lee.com/imgs/vue3/near.png"
            class="vaCard">
    <template #tags>
      <div class="textDesc">
        <van-tag plain
                 type="danger">月售 </van-tag>
        <van-tag plain
                 type="danger">起送</van-tag>
        <van-tag plain
                 type="danger">接触运费</van-tag>
      </div>

      <div>
        <van-tag plain
                 type="danger">VIP尊享满89元减4元运费券</van-tag>
      </div>
    </template>

  </van-card> -->
  <!-- </div> -->

  <!-- 底部 -->
  <footers>

  </footers>

</template>

<script>

import headers from '../../components/header.vue'
import footers from '../../components/footer.vue'

export default {
  components: {
    headers,
    footers
  },

  name: 'appHome',
  data () {
    return {
    }
  },
  setup () {
    const iconsList = [
      { imgName: '超市', desc: '超市便利' },
      { imgName: '菜市场', desc: '菜市场' },
      { imgName: '水果店', desc: '水果店' },
      { imgName: '鲜花', desc: '鲜花绿植' },
      { imgName: '医药健康', desc: '医药健康' },
      { imgName: '家居', desc: '家居时尚' },
      { imgName: '蛋糕', desc: '烘培蛋糕' },
      { imgName: '签到', desc: '签到' },
      { imgName: '大牌免运', desc: '大牌免运' },
      { imgName: '红包', desc: '红包套餐' }
    ]
    return {
      iconsList
    }
  },

  methods: {},
  mounted () { }
}
</script>

<style scoped lang='less'>
.box {
  height: 100%;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  //   line-height: 150px;
  text-align: center;
  //   background-color: #39a9ed;

  img {
    width: 100%;
    display: block;
    float: left;
  }
}

.van-grid-item {
  .text {
    margin-top: 6px;
    display: block;
  }
}

.textDesc {
  margin: 5px 0;
}
</style>
